import { useState } from 'react';
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-github';

// 导入可复用的差异对比模态框组件
import DiffeditorModal from './components/DiffeditorModal';

export default function EditorPage() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  
  // 示例代码内容
  const leftCode = '// 旧版本代码示例\nfunction hello() {\n  console.log("Hello");\n}';
  const rightCode = '// 新版本代码示例\nfunction hello(name) {\n  console.log(`Hello, ${name}`);\n  return name;\n}';

  return (
    <div className="editor-container p-4">
      <button 
        className="bg-blue-500 text-white px-4 py-2 rounded mb-4"
        onClick={() => setIsModalOpen(true)}
      >
        显示差异对比
      </button>
      <AceEditor
        mode="javascript"
        theme="github"
        name="code-editor"
        fontSize={14}
        width="100%"
        height="500px"
        showPrintMargin={false}
        defaultValue="// 输入你的代码 here"
      />
      
      {/* 使用可复用的差异对比模态框组件 */}
      <DiffeditorModal
        open={isModalOpen}
        onRequestClose={() => setIsModalOpen(false)}
        diff={{original:leftCode,modified:rightCode}}
        leftLabel="旧版本代码"
        rightLabel="新版本代码"
        title="代码差异对比示例"
        width="90%"
        height="85vh"
      />
    </div>
  );
}